<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Color Quiz</title>

    <style>
      html,
      body {
        margin: 0;
        box-sizing: border-box;
        font-family: Verdana, Geneva, sans-serif;
      }
      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        height: 200px;
        width: 100vw;
      }

      h1,
      h2,
      #attempts {
        text-align: center;
        color: white;
        text-shadow: 1px 1px 1px #111111a9, 1px -1px 1px #111111a9,
          -1px 1px 1px #111111a9, -1px -1px 1px #111111a9;
      }

      button {
        height: 50px;
        width: 190px;
        margin: 0 10px;
        cursor: pointer;

        outline: none;
        background: #111;
        border: 2px solid white;
        border-radius: 25px;
        color: white;
        font-size: 22px;
        text-transform: capitalize;
      }
      button:hover {
        background: #333;
      }

      .hidden {
        display: none;
      }

      #end-screen {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        background: linear-gradient(to top right, salmon, lemonchiffon);
      }

      .wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 700px;
      }

      #end-screen div button {
        margin: 0 auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Background color name is ...?</h1>
      <h2 id="score">Score</h2>
      <h3 id="attempts"></h3>
      <div class="container">
        <button id="answer-1">a</button>
        <button id="answer-2">b</button>
        <button id="answer-3">c</button>
      </div>
    </div>

    <div id="end-screen" class="hidden">
      <div class="wrapper">
        <h1>Congratulations!</h1>
        <h2 name="score"></h2>
        <button onclick="reset()">Restart</button>
      </div>
    </div>

    <script>
      const colors = {
        reds: ["salmon", "indianred", "crimson", "firebrick", "red"],
        oranges: ["coral", "tomato", "gold", "orange", "orangered"],
        yellows: [
          "lemonchiffon",
          "papayawhip",
          "moccasin",
          "peachpuff",
          "khaki",
          "yellow"
        ],
        greens: [
          "lawngreen",
          "chartreuse",
          "limegreen",
          "lime",
          "forestgreen",
          "green",
          "yellowgreen",
          "greenyellow",
          "springgreen",
          "seagreen",
          "olive"
        ],
        cyans: [
          "cyan",
          "aqua",
          "aquamarine",
          "paleturquoise",
          "turquoise",
          "lightseagreen",
          "teal",
          "cadetblue"
        ],
        blues: [
          "powderblue",
          "lightskyblue",
          "deepskyblue",
          "dodgerblue",
          "cornflowerblue",
          "steelblue",
          "royalblue",
          "blue",
          "darkblue",
          "navy",
          "midnightblue",
          "mediumslateblue",
          "slateblue"
        ],
        purples: [
          "lavender",
          "thistle",
          "plum",
          "violet",
          "orchid",
          "fuchsia",
          "magenta",
          "blueviolet",
          "purple",
          "indigo"
        ],
        pinks: [
          "pink",
          "lightpink",
          "hotpink",
          "deeppink",
          "palevioletred",
          "mediumvioletred"
        ]
      };
      var body = document.getElementsByTagName("body")[0];
      var scoreElem = document.getElementById("score");
      var attemptsElem = document.getElementById("attempts");
      var endScreen = document.getElementById("end-screen");
      var score = 0;
      var attempts = 0;
      var maxAttempst = 10;

      Array.from(
        document
          .getElementsByClassName("container")[0]
          .getElementsByTagName("button")
      ).forEach(button => {
        button.addEventListener("click", event => {
          if (body.dataset["value"] == event.target.dataset["value"]) {
            score++;
          }
          attempts++;

          if (attempts >= maxAttempst) {
            showEndScreen();
          } else {
            doRound();
          }
        });
      });

      function reset() {
        score = 0;
        attempts = 0;
        updateDisplays();
        endScreen.classList.add("hidden");
      }

      function showEndScreen() {
        endScreen.classList.remove("hidden");
        endScreen.children.item(0).children.namedItem("score").innerHTML =
          "You got " + score + " out of " + maxAttempst + " right";
      }

      function updateDisplays() {
        scoreElem.innerHTML = "Score: " + score + "/" + maxAttempst;
        attemptsElem.innerHTML = "Answered: " + attempts;
      }

      function randomNumberBetween(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function setButton(id, val) {
        var button = document.getElementById("answer-" + id);
        button.innerHTML = val;
        button.dataset["value"] = val;
      }

      function getRandomProperty(obj) {
        var keys = Object.keys(obj);
        return obj[keys[(keys.length * Math.random()) << 0]];
      }

      function setRandomBackgroundColor() {
        var colorType = getRandomProperty(colors);
        var colorPos = randomNumberBetween(0, colorType.length - 1);

        body.style.background = colorType[colorPos];
        body.dataset["value"] = colorType[colorPos];

        return [colorType, colorPos];
      }

      function doRound() {
        updateDisplays();
        var [colorType, colorPos] = setRandomBackgroundColor();

        var correctAnswerButton = randomNumberBetween(1, 3);
        setButton(correctAnswerButton, colorType[colorPos]);
        var buttonIds = [1, 2, 3];
        var possibleVals = Array.from(
          Array(colorType.length),
          (x, index) => index
        ).filter(v => v != colorPos);
        buttonIds
          .filter(bi => bi != correctAnswerButton)
          .forEach(bi => {
            var otherColorPos = getRandomProperty(possibleVals);
            setButton(bi, colorType[otherColorPos]);
            possibleVals = possibleVals.filter(v => v != otherColorPos);
          });
      }

      doRound();
    </script>
  </body>
</html>
